<template>
  <a-scrollbar>
    <a-form
      v-model="config"
      size="mini"
      label-align="right"
      layout="horizontal"
      :label-col-props="labelColProps"
      :wrapper-col-props="wrapperColProps"
    >
      <a-form-item
        field="model"
        tooltip=""
        label="组件类型"
      >
        <a-tag color="pinkpurple" bordered>
          {{ config.name }}
        </a-tag>
      </a-form-item>
      <a-form-item
        field="model"
        tooltip=""
        label="组件ID"
      >
        <a-input v-model="config.id" readonly />
      </a-form-item>
      <a-form-item
        field="align"
        tooltip=""
        label="栅格占位格数"
      >
        <a-input-number
          v-model="config.config.span"
          mode="button"
          :max="24"
          :min="1"
        />
      </a-form-item>
      <a-form-item
        field="align"
        tooltip="栅格左侧的间隔格数，间隔内不可以有栅格"
        label="栅格间隔"
      >
        <a-input-number
          v-model="config.config.offset"
          mode="button"
          allow-clear
          :max="99999"
          :min="0"
        />
      </a-form-item>
      <a-form-item
        field="align"
        tooltip="对元素进行排序"
        label="栅格排序"
      >
        <a-input-number
          v-model="config.config.order"
          mode="button"
          allow-clear
          :max="99999"
          :min="0"
        />
      </a-form-item>
    </a-form>
  </a-scrollbar>
</template>

<script lang="ts" setup>
import { defineModel } from 'vue';
import { labelColProps, wrapperColProps } from '../config';

const config = defineModel('config', { type: Object, default: { formList: [] } });

</script>

<script lang="ts">
export default {
  name: 'GridColSetting'
};
</script>

<style lang="less" scoped>

</style>